<template>
    <div>
        <div>
            <el-menu mode="horizontal">
                <el-menu-item>
                    <img src="../assets/homeStaffPic.png" alt="客服人员管理平台" class="headPic">
                </el-menu-item>
            </el-menu>
        </div>
        
        <div class="maintainTable">
            <b>维修记录</b>
            <el-table border :data="maintainData" style="width: 100%">
                <el-table-column prop="phoneNumber" label="手机号">
                </el-table-column>
                <el-table-column prop="RepairType" label="维修类型">
                </el-table-column>
                <el-table-column prop="AppointmentDate" label="预订日期">
                </el-table-column>
                <el-table-column prop="IssueDetails" label="问题详情">
                </el-table-column>
                <el-table-column label="操作">
                    <template>
                        <el-button type="text" size="small">签收</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <br>
        <br>
        <div class="complaintTable">
            <b>投诉记录</b>
            <el-table border :data="complaintData" style="width: 100%">
                <el-table-column prop="phoneNumber" label="手机号">
                </el-table-column>
                <el-table-column prop="issueType" label="投诉类型">
                </el-table-column>
                <el-table-column prop="issueDetails" label="问题详情">
                </el-table-column>
                <el-table-column label="操作">
                    <template>
                        <el-button type="text" size="small">签收</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <br>
        <br>
        <div class="messageTable">
            <b>留言记录</b>
            <el-table border :data="messageData" style="width: 100%">
                <el-table-column prop="phoneNumber" label="手机号">
                </el-table-column>
                <el-table-column prop="conversationContent" label="留言内容">
                </el-table-column>
            </el-table>
        </div>
        <br>
        <br>
        <div class="salaryTable">
            <b>薪资变更</b>
            <el-table border :data="salaryData" style="width: 100%">
                <el-table-column prop="SalaryUpdate" label="薪资变更">
                </el-table-column>
                <el-table-column prop="ChangeTime" label="变更日期">
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
import axios from 'axios'; 

export default {
    data() {
        return {
            maintainData: [],
            complaintData: [],
            messageData: [],
            salaryData: [],
        };
    },
    created() {
        this.fetchMaintainData();
        this.fetchComplaintData();
        this.fetchMessageData();
        this.fetchSalaryData();
    },
    methods: {
        fetchMaintainData() {
            axios.get('http://localhost:8089/maintainSelectToCustomerService')
                .then(response => {
                    this.maintainData = response.data;
                })
                .catch(error => {
                    console.error('Error fetching maintain records:', error);
                });
        },
        fetchComplaintData() {
            axios.get('http://localhost:8089/complaintSelectToCustomerService')
                .then(response => {
                    this.complaintData = response.data;
                })
                .catch(error => {
                    console.error('Error fetching complaint records:', error);
                });
        },
        fetchMessageData() {
            axios.get('http://localhost:8089/serviceOnlineRecordToCustomerService')
                .then(response => {
                    this.messageData = response.data;
                })
                .catch(error => {
                    console.error('Error fetching message records:', error);
                });
        },
        fetchSalaryData() {
            axios.get('http://localhost:8089/getSalaryUpdate')
                .then(response => {
                    this.salaryData = response.data;
                })
                .catch(error => {
                    console.error('Error fetching salary updates:', error);
                });
        }
    }
}
</script>

<style>
.headPic {
    position: absolute;
    top: -2vh;
    left: -2vh;
    width: 201vh;
    height: 21vh;
}
.maintainTable {
    margin-top: 18vh;
    margin-left: 20%;
    width: 60%;
    text-align: center;
}
.maintainTable b {
    font-size: 20px;
}

.complaintTable {
    margin-top: 20vh; /* 更改为20vh */
    margin-left: 20%;
    width: 60%;
    text-align: center;
}
.complaintTable b {
    font-size: 20px;
}

.messageTable {
    margin-top: 20vh; /* 更改为20vh */
    margin-left: 20%;
    width: 60%;
    text-align: center;
}
.messageTable b {
    font-size: 20px;
}

.salaryTable {
    margin-top: 20vh; /* 更改为20vh */
    margin-left: 20%;
    width: 60%;
    text-align: center;
}
.salaryTable b {
    font-size: 20px;
}

</style>
